import React from 'react'

// 地址列表组件  
function AddressList(props) {
    const { addressList, delAddress } = props; //解构父组件传来的参数
    return (
        <div>
            {
                addressList.length ?
                    addressList.map(item => {
                        return <li key={item.id} className="Alllist">
                            <div className='info'>
                                <input type="checkbox" />
                                <div className=''>
                                    <h3>{item.name}  {item.phone}</h3>
                                    <p>{item.province}  {item.city}  {item.area}  {item.address}</p>
                                </div>
                            </div>
                            <div className='btns'>
                                <input type="checkbox" />设为默认
                                <button>置顶</button>
                                <button>复制</button>
                                <button onClick={() => {
                                    alert("删除")
                                    delAddress(item.id)
                                }}>删除</button>
                                <button>修改</button>
                            </div>
                        </li>
                    }) : <div>
                        <img src="https://img.yzcdn.cn/vant/apple-1.jpg" alt="" />
                        <h3>暂无数据</h3>
                    </div>
            }
        </div>
    )
}

export default AddressList